import { CheckboxField } from '@aws-amplify/ui-react';

import {
  CheckboxFieldControlledExample,
  CheckboxFieldDisabledExample,
  CheckboxFieldIndeterminateExample,
  CheckboxFieldLabelHiddenExample,
  CheckboxFieldSizesExample,
  CheckboxFieldThemeExample,
  CheckboxFieldValueExample,
  CheckboxFieldWithErrorExample,
  DefaultCheckboxFieldExample,
} from './examples';
import { CheckboxDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<CheckboxDemo />

## Usage

Import the CheckboxField primitive.

<Example>
  <DefaultCheckboxFieldExample />
  
  <ExampleCode>

  ```tsx file=./examples/DefaultCheckboxFieldExample.tsx

  ```

  </ExampleCode>
</Example>


### Controlled component

<Example>
  <CheckboxFieldControlledExample />
  
  <ExampleCode>
    
```tsx file=./examples/CheckboxFieldControlledExample.tsx

```
    
  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the SelectField size. Available options are `small`, `large`, and none (default).

<Example>
  <CheckboxFieldSizesExample />
  
  <ExampleCode>
    
```tsx file=./examples/CheckboxFieldSizesExample.tsx

```
    
  </ExampleCode>
</Example>


### Value

The value associated with the checkbox name in form data, used when submitting an HTML form. If a checkbox is unchecked when its form is submitted, its value will not be submitted. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).


<Example>
  <CheckboxFieldValueExample />
  <ExampleCode>
    
```tsx file=./examples/CheckboxFieldValueExample.tsx

```
    
  </ExampleCode>
</Example>

In this example, we've got a name of `subscribe`, and a value of `yes`. When the form is submitted, the data name/value pair will be `subscribe=yes`.

### State

#### Disabled

A disabled checkbox will be not be focusable not mutable. A checked checkbox could also be disabled but it will not be submitted with form data.

<Example>
  <CheckboxFieldDisabledExample />
  
  <ExampleCode>

  ```tsx file=./examples/CheckboxFieldDisabledExample.tsx

  ```

  </ExampleCode>
</Example>

#### Indeterminate

In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. This is a state in which it's impossible to say whether the item is toggled on or off.

<Example>
  <CheckboxFieldIndeterminateExample />
  
  <ExampleCode>

  ```tsx file=./examples/CheckboxFieldIndeterminateExample.tsx

  ```

  </ExampleCode>
</Example>

### Validation error

Use the `hasError` and `errorMessage` props to mark a CheckboxField as having an validation error.

<Example>
  <CheckboxFieldWithErrorExample />
  
  <ExampleCode>

  ```tsx file=./examples/CheckboxFieldWithErrorExample.tsx

  ```

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>



<Example>
  <CheckboxFieldLabelHiddenExample />
  
  <ExampleCode>

  ```tsx file=./examples/CheckboxFieldLabelHiddenExample.tsx

  ```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="CheckboxField" link="input" element="<input>">
  <Example>
    <CheckboxField label="Subscribe to our newsletter" name="subscribe" value="yes" />

    <ExampleCode>

    ```jsx
    <CheckboxField label="Subscribe to our newsletter" name="subscribe" value="yes" />
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="CheckboxField" link="checkbox">
  <Example>
    <CheckboxFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/CheckboxFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="CheckboxField" />

### Global styling

To override styling on all Checkbox icons, you can set the Amplify CSS variables or use the built-in `.amplify-checkbox__icon` class.

```css
/* styles.css */
:root {
  --amplify-components-checkbox-icon-background-color: var(
    --amplify-colors-blue-80
  );
}
/* OR */
.amplify-checkbox__icon {
  background-color: var(--amplify-colors-blue-80);
}
```

<Example>
  <CheckboxField
    label="Subscribe"
    name="subscribe"
    value="yes"
    className="global-css-variable"
  />
  <CheckboxField
    label="Subscribe"
    name="subscribe"
    value="yes"
    className="global-class"
  />
</Example>

### Local styling

To override styling on a specific Checkbox, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

```css
/* styles.css */
.custom-checkbox .amplify-checkbox {
  align-items: flex-start;
  flex-direction: column-reverse;
}
```

```jsx
import { CheckboxField } from '@aws-amplify/ui-react';
import './styles.css';

<CheckboxField
  label="Subscribe"
  name="subscribe"
  value="yes"
  className="custom-checkbox"
/>;
```

<Example>
  <CheckboxField
    label="Subscribe"
    name="subscribe"
    value="yes"
    className="custom-checkbox"
  />
</Example>

_Using data attributes:_

```css
/* styles.css */

.amplify-checkbox__icon[data-checked='true'] {
  background-color: var(--amplify-colors-purple-80);
}
```

```jsx
import { CheckboxField } from '@aws-amplify/ui-react';
import './styles.css';

<CheckboxField label="Subscribe" name="subscribe" value="yes" />;
```

<Example>
  <CheckboxField
    label="Subscribe"
    name="subscribe"
    value="yes"
    className="custom-data-attribute"
  />
</Example>

_Using style props:_

```jsx
import { CheckboxField } from '@aws-amplify/ui-react';

<CheckboxField label="Subscribe" name="subscribe" value="yes" gap="1rem" />;
```

<Example>
  <CheckboxField label="Subscribe" name="subscribe" value="yes" gap="1rem" />
</Example>